<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-13 11:52:52
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-30 13:59:37
 * @FilePath: \ProtocolTool\src\renderer\src\views\Manual\index.vue
-->
<script lang="ts" setup>
import { reactive, VueElement, markRaw } from 'vue'
import type { ItemType } from 'ant-design-vue'

// Socket 测试页面
import S_RealTimeData from './Socket/RealTimeData.vue'
import S_CurrentData from './Socket/CurrentData.vue'
import S_CustomData from './Socket/CustomData.vue'
import S_EventData from './Socket/EventData.vue'
import S_GetParam from './Socket/GetParam.vue'
import S_SetParam from './Socket/SetParam.vue'
import S_GetAttribute from './Socket/GetAttribute.vue'
import S_GetStatus from './Socket/GetStatus.vue'
import S_DeviceControl from './Socket/DeviceControl.vue'
import S_UserLogin from './Socket/UserLogin.vue'
import S_UpdatePassword from './Socket/UpdatePassword.vue'
import S_RunLog from './Socket/RunLog.vue'
import { getOnlineDeviceAPI } from '@/api/Manual'

// 选中菜单
const selectMenu = ref(['M_RealTimeData'])

// Socket 测试列表
const SocketTestList = {
  S_RealTimeData,
  S_CurrentData,
  S_CustomData,
  S_EventData,
  S_GetParam,
  S_SetParam,
  S_GetAttribute,
  S_GetStatus,
  S_DeviceControl,
  S_UserLogin,
  S_UpdatePassword,
  S_RunLog
}
// 当前组件
const key = ref(markRaw(SocketTestList['M_RealTimeData']))
function getItem(
  label: VueElement | string,
  key: string,
  icon?: any,
  children?: ItemType[],
  type?: 'group'
): ItemType {
  return {
    key,
    icon,
    children,
    label,
    type
  } as ItemType
}

// Socket测试菜单列表
const SocketItems: ItemType[] = reactive([
  getItem(
    '用户认证',
    'manual-1',
    null,
    [getItem('用户登录', 'S_UserLogin'), getItem('修改密码', 'S_UpdatePassword')],
    'group'
  ),
  getItem('实时传输', 'manual-2', null, [getItem('实时测量数据', 'S_RealTimeData')], 'group'),
  getItem(
    '指令传输',
    'manual-3',
    null,
    [
      getItem('获取工作参数', 'S_GetParam'),
      getItem('设置工作参数', 'S_SetParam'),
      getItem('获取属性信息', 'S_GetAttribute'),
      getItem('整体测量数据', 'S_CustomData'),
      getItem('当前测量数据', 'S_CurrentData'),
      getItem('事件记录测量数据', 'S_EventData'),
      getItem('设备状态信息', 'S_GetStatus'),
      getItem('设备运行日志', 'S_RunLog'),
      getItem('设备控制', 'S_DeviceControl')
    ],
    'group'
  )
])
// 当前菜单列表
const items = computed(() => SocketItems)
// 点击菜单切换组件
const handleClick = (e) => {
  key.value = markRaw(SocketTestList[e.key])
}
// 选中设备
const selected = ref('')
// 获取在线设备列表
const OnlineDeviceList = ref<any>([])
const getOnlineDevice = async () => {
  const res = await getOnlineDeviceAPI()
  OnlineDeviceList.value = res.data
  selected.value = OnlineDeviceList.value[0]?.clientId
  key.value = markRaw(SocketTestList['S_RealTimeData'])
}
getOnlineDevice()
// 设备改变
const handleDeviceChange = () => {
  //下拉选择只保留Socket
  key.value = markRaw(SocketTestList['S_RealTimeData'])
}
</script>

<template>
  <div class="container">
    <div class="sider">
      <div class="select">
        <a-select v-model:value="selected" style="width: 180px" @change="handleDeviceChange">
          <a-select-option
            v-for="item in OnlineDeviceList"
            :key="item.clientId"
            :value="item.clientId"
            >{{ item.name }}
          </a-select-option>
        </a-select>
      </div>
      <div class="manual-menu">
        <a-menu v-model:selectedKeys="selectMenu" mode="inline" :items @click="handleClick">
        </a-menu>
      </div>
    </div>
    <div class="response">
      <component :is="key" :device="selected"></component>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: space-between;

  .sider {
    width: 180px;
    height: 100%;

    .select {
      height: 42px;
    }

    .manual-menu {
      height: calc(100% - 42px);
      overflow-y: auto;
      overflow-x: hidden;

      &::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
      }

      ::v-deep(.ant-menu-item-group-title) {
        font-size: 16px;
      }
    }
  }

  .response {
    width: calc(100% - 190px);
    height: 100%;
  }
}
</style>
